<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片区域-->
    <el-card>
      <!--添加区域-->
      <el-row>
        <el-col :pull="1" :span="4">
          <el-button type="primary" @click="Add()">新 增</el-button>
        </el-col>
      </el-row>
      <!--表格区域-->
      <el-table :data="tableData" style="width: 100%" stripe border>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="Edit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="Delete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 2, 3]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!--这是新增的模态框-->
      <el-dialog title="新增" :visible.sync="adddialogVisible" width="50%">
        <span>
          <el-form ref="form" :model="addform" label-width="80px">
            <el-form-item label="名称">
              <el-input v-model="addform.name"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="addform.address"></el-input>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                v-model="addform.date"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="adddialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddok()">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改的模态框-->
      <el-dialog title="修改" :visible.sync="editdialogVisible" width="50%">
        <span>
          <el-form ref="editform" :model="editform" label-width="80px">
            <el-form-item label="编号">
              <el-input v-model="editform.id" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="editform.name"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="editform.address"></el-input>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker
                v-model="editform.date"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editok()">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      total: 1,
      currentPage: 1, //当前页
      pageSize: 1, //每页显示数
      adddialogVisible: false, //新增的模态框
      //新增模态框关联的值
      addform: {
        name: "", //用户名
        address: "", //用户地址
        date: "", //时间
      },
      //修改的模态框
      editdialogVisible: false,
      //修改模态框关联的值
      editform: {
        id: "",
        name: "", //用户名
        address: "", //用户地址
        date: "", //时间
      },
    };
  },
  methods: {
    //组件加载就触发的方法
    fill() {
      this.$http
        .get("/api/get/user", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          console.info(res);
          this.tableData = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.info(err);
        });
    },
    //每页显示数改变事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.fill();
    },
    //页码改变事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fill();
    },
    //修改事件
    Edit(index, row) {
      //需求分析：打开编辑的模特框,把当前行的值显示在模态框
      //打开模态框
      this.editdialogVisible = true;
      //给关联模态框的对象赋值
      this.editform.id = row.id;
      this.editform.name = row.name;
      this.editform.address = row.address;
      this.editform.date = row.date;
      //console.info(row);
    },
    //删除事件
    Delete(index, row) {
      //需求：根据id值发送给后台，做删除
      // console.info(row.id);
      if (confirm("亲，你确定要这样吗?")) {
        this.$http
          .delete("/api/delete/sc", {
            params: {
              id: row.id,
            },
          })
          .then((res) => {
            if (res.data.status == 200) {
              //需求：成功后，刷新数据，给出提示
              this.fill();
              //给出成功提示
              this.$message({
                message: "恭喜你，删除成功啦",
                type: "success",
              });
            }
          })
          .catch((err) => {
            console.info(err);
          });
      }
    },
    //打开添加模态框
    Add() {
      // console.info("1");
      //打开模态框
      this.adddialogVisible = true;
    },
    //新增操作
    adddok() {
      //需求：把数据往后台发送
      this.$http
        .post("/api/post/add", {
          name: this.addform.name,
          address: this.addform.address,
          date: this.addform.date,
        })
        .then((res) => {
          //console.info(res);
          if (res.data.status == 200) {
            //刷新
            this.fill();
            //关闭新增模态框
            this.adddialogVisible = false;
            //清空原来的值
            this.addform.name = "";
            this.addform.address = "";
            this.addform.date = "";
            //给出成功提示
            this.$message({
              message: "恭喜你，新增成功啦",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.info(err);
        });
    },
    //修改确认操作
    editok() {
      //需求：把修改后的数据发送给后台;如果成功，关闭模态框，数据刷新
      this.$http
        .put("/api/put/edit", {
          id: this.editform.id,
          name: this.editform.name,
          address: this.editform.address,
          date: this.editform.date,
        })
        .then((res) => {
          //如果成功，关闭模态框，数据刷新
          if (res.data.status == 200) {
            //关闭模态框
            this.editdialogVisible = false;
            //数据刷新
            this.fill();
            //给出成功提示
            this.$message({
              message: "恭喜你，修改成功啦",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.info(err);
        });
    },
  },
  //组件启动时会触发的方法之一
  mounted() {
    this.fill();
  },
};
</script>
<style scoped>
.el-card {
  margin-top: 15px;
}
.el-table {
  margin-top: 15px;
}
.el-date-editor.el-input {
  width: 100%;
}
</style>